<template>
  <div>
    <div id="centreLeft" ></div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      chart: null,
      item : ['船舶垃圾', '生活污水'],
      category : ['接收', '处置', '转运'],
      splitNumber : 4,
      showLegend : true,
      rubbish : null,
      sewage : null,
      company_id:''

    };
  },

  mounted() {
    this.getData()
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    selectProp:{
      handler(n){
        console.log('centreLeft获取父组件的参数： ' + n)
        this.company_id = n
        this.getData()
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },
  methods: {
    //月接转处数据
    getData(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryDealData?companyId=' + this.company_id).then((response)=>{
        this.rubbish = response.data.data.rubbish;
        this.sewage = response.data.data.sewage;
        this.draw();
      })
    },

    draw() {
      const data_arr1 = []
      //因为data是需要的是这种数据格式，所以下面拼接出这种格式的数据出来
         let data1 =     [  //假数据
              {
                value: [864, 820, 744],
                name: this.item[0],

              },
                      {
                        value: [660, 590, 643],
                        name: this.item[1],
                      }
              ]

      data_arr1.push({name: this.item[0], value: [this.rubbish[0].reciveCount
                  ,this.rubbish[0].transportCount
                  ,this.rubbish[0].handleCount]},
              {name: this.item[1], value: [this.sewage[0].reciveCount
                  ,this.sewage[0].transportCount
                  ,this.sewage[0].handleCount]},);
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft"));
      let option = {
        tooltip: {
          show: true,
          trigger: "item",
        },
        color: ['#399EFF', '#FF8A44'],
        legend: {
          show: this.showLegend,
          data: this.item,
          bottom: 0,
          icon: 'circle',
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255)",
            fontSize: "18"
          }

        },

        radar: {
          name: {
            textStyle: {
              fontSize: 18,
              color: "rgba(255,255,255)",
            }
          },
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            }
          },

          splitNumber: this.splitNumber,
          splitLine: {
            lineStyle: {
              color: '#B4B4B4',
            }

          },
          splitArea: {
            show: false,

          },
          indicator: [
            { name: this.category[0], max: 1000, axisLabel: {show: true}},
            { name: this.category[1], max: 1000},
            { name: this.category[2], max: 1000},
          ],
          radius: 100,//雷达图大小缩放
          center: ['50%', '60%'],//雷达图的位置
        },
        series: [{
          type: 'radar',
          symbol: 'circle',
          symbolSize: 5,
          data: data1,

        }]
      };

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
  #centreLeft{
    width: 100%;
    height: 270px;
    margin: 0 auto;
  }
</style>
